<script setup lang="ts">
import { h } from "vue";
import type { Component } from "vue";

import { useRouter } from "vue-router";

import { NFlex } from "naive-ui";
import { NIcon } from "naive-ui";
import { NDropdown } from "naive-ui";
import { NButton } from "naive-ui";
import { useDialog } from "naive-ui";

import {
  PersonCircleOutline as UserIcon,
  SettingsOutline as SettingIcon,
  LogOutOutline as LogoutIcon,
} from "@vicons/ionicons5";

const router = useRouter();

const dialog = useDialog();

const handleSelect = (key: string | number) => {
  switch (key) {
    case "profile":
      router.push("/profile");
      break;
    case "setting":
      router.push("/setting");
      break;
    case "logout":
      dialog.warning({
        title: "警告",
        content: "确定要退出吗？",
        positiveText: "确定",
        negativeText: "取消",
        maskClosable: false,
        onPositiveClick: () => {
          router.push("/login");
        },
        onNegativeClick: () => {},
      });
      break;
  }
};

const renderIcon = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};

const options = [
  {
    label: "个人信息",
    key: "profile",
    icon: renderIcon(UserIcon),
  },
  {
    label: "设置",
    key: "setting",
    icon: renderIcon(SettingIcon),
  },
  {
    label: "退出",
    key: "logout",
    icon: renderIcon(LogoutIcon),
  },
];
</script>

<template>
  <n-flex justify="space-between" align="center" class="w-full h-full">
    <n-flex justify="start" align="center" class="w-1/3 h-full pl-3">
      <n-flex
        justify="center"
        align="center"
        class="w-1/6 h-10 bg-gray-300 rounded-full"
      >
        <span class="text-2xl">Logo</span>
      </n-flex>
      <router-link to="/home" class="text-2xl"> 汽车租赁系统 </router-link>
    </n-flex>
    <n-flex justify="end" align="center" class="w-1/3 h-full pr-3">
      <n-dropdown :options="options" @select="handleSelect">
        <n-button round class="min-w-20">
          <template #icon>
            <n-icon>
              <UserIcon />
            </n-icon>
            用户
          </template>
        </n-button>
      </n-dropdown>
    </n-flex>
  </n-flex>
</template>

<style scoped></style>
